<template>
  <a-row class="com-web-tool-editor-json">
    <a-col span="2">
      JSON
    </a-col>
    <a-col span="22">
      <a-button class="btn" type="primary" size="small" @click="jsonClick">
        JSON序列化
      </a-button>
      <a-button class="btn" type="primary" size="small" @click="jsonCacheClick">
        JSON缓存
      </a-button>
    </a-col>
    <w-modal
      ref="WModal"
      title="JSON缓存(数据只能缓存7天)"
      :ok-type="dataId ? 'danger' : 'primary'"
      :ok-text="dataId ? '清 除' : '确 定'"
      @ok="jsonCacheOk"
    >
      <span v-if="dataId">
        <a target="_blank" :href="jsonUrl">{{ dataId }}</a>
        &nbsp;&nbsp;
        <w-copy-text
          :top="20"
          class="w-text-warp"
          :text="jsonCacheLink"
        >
          复制链接
        </w-copy-text>
      </span>
      <a-input v-else v-model="jsonCacheValue" type="textarea" placeholder="请输入JSON" />
    </w-modal>
  </a-row>
</template>
<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
import { Api } from '@/config/api'
import WModal, { ModalComType } from '@/components/global/modal'

@Component({
  name: 'ComWebToolEditorJson',
  components: {
    WModal
  }
})
export default class ComWebToolEditorJson extends Vue {
  jsonCacheValue = '';
  dataId = '';

  get jsonUrl () {
    return `/json-editer/${this.dataId}`
  }

  get jsonCacheLink () {
    return `https://wangyabin.top${this.jsonUrl}`
  }

  jsonClick () {
    window.open('https://cdn.wangyabin.top/Extension/json-editer/index.html')
  }

  jsonCacheClick () {
    (this.$refs.WModal as ModalComType).show()
  }

  jsonCacheClearClick () {
    this.jsonCacheValue = ''
    this.dataId = ''
  }

  jsonCacheOk () {
    if (this.dataId) {
      this.jsonCacheClearClick()
      return
    }
    if (!this.jsonCacheValue) {
      this.$message.error('请输入数据')
      return
    }
    this.$wAxios
      .$post(Api.cacheData.crud, {
        data: this.jsonCacheValue
      })
      .then((value) => {
        this.dataId = value
      })
  }
}
</script>

<style lang="less"></style>
